<template>
	<view class="page">
		<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
			<view class="_left text-999">银行账号</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="text-666">{{account.account_id}}</text>
				<text class="margin-left-sm text-blue" @click="handlerCopy(account.account_id)">复制</text>
			</view>
		</view>
		<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
			<view class="_left text-999">银行开户名</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="text-666">{{account.account_name}}</text>
			</view>
		</view>
		<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
			<view class="_left text-999">开户银行所在地</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="text-666">{{account.bank_address}}</text>
			</view>
		</view>
		<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
			<view class="_left text-999">开户行</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="text-666">{{account.bank_branch}}</text>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
		  <view class="_left">打款金额</view>
		  <view class="_right text-cut  text-cut  text-right">
		    <text class="text-666">{{account.money || 0}}</text>
		  </view>
		</view>
		<view class="shop-item margin-lr bg-white height-100 text-df flex justify-between align-center solid-bottom">
			<view class="_left">打款备注</view>
			<view class="_right text-cut  text-cut  text-right text-666">
				<input type="text" placeholder="请输入打款备注" v-model="pay_remarks" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="shop-item bg-white padding-tb margin-lr text-df flex  flex-direction ">
		  <view class="_left">打款截图</view>
		  <view class="_right text-right flex margin-top">
		    <image src="../../static/upload-code.png" mode="" class="up-img" v-if="!pay_img" @click="upLoadImg()"></image>
		    <view class="img-wrap" v-else>
		      <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg()"></text>
		      <image class="img" :src="pay_img_url" mode="aspectFit"></image>
		    </view>
		  </view>
		</view>

		<!-- <view class="padding-tb-lg ">
			<view class="text-666 text-center padding-lr padding-tb">保存以下二维码使用支付宝微信扫描可以进行快捷支付</view>
			<view class="flex justify-around align-center">
				<view>
					<image class="pay-img" src="../../static/account.png" @click="handlePreview('../../static/account.png')"></image>
					<view class="padding-top-sm text-center">微信</view>
				</view>
				<view>
					<image class="pay-img" src="../../static/account.png" @click="handlePreview('../../static/account.png')"></image>
					<view class="padding-top-sm text-center">支付宝</view>
				</view>
				
			</view>
		</view> -->
		<view class="btn-wrap flex justify-between align-center margin-tb-xl margin-lr">
			<view class="btn" @click="handlerPre">上一步</view>
			<view class="btn active" @click="handlerNext">提交</view>
		</view>
	</view>
</template>

<script>
	// @see 引入验证，上传图片
	import {
		UploadImage,
		validate
	} from '@/common/utils/index';
	export default {
		data() {
			return {
				pay_img: '',
				pay_img_url: '',
				pay_remarks: '',
				account: {}
			}
		},
		onLoad() {
			this.getPayInfo();
		},
		methods: {
			handlePreview(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			handlerCopy(str) {
				uni.setClipboardData({
					data: str,
					success: res => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 上一步
			handlerPre() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 下一步
			handlerNext() {
				console.log(this.info)
				let info = this.info;
				let {
					pay_img,
					pay_remarks
				} = this;
				if (!pay_img) return this.$message.info('请上传打款截图');
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				this.$api.post('/v1/610b945ea65eb', {
					pay_img: pay_img,
					pay_remarks: pay_remarks
				}, {
					header: {
						Storeid: store_joinin_id,
						Userid: store_user_id
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})

			},
			getPayInfo() {
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				this.$api.post('/v1/610b8d0c3b23b', {}, {
					header: {
						Storeid: store_joinin_id,
						Userid: store_user_id
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.account = res.data.data.account;
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * @description 上传截图凭证
			 */
			upLoadImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						console.log(res);
						let list = res.tempFilePaths;
						list.forEach((val, i) => {
							this.uploadUserImg(val);
						});
					}
				});
			},
			/**
			 * @description 上传图片
			 */
			uploadUserImg(blob) {
				// uni.showLoading();
				let _this = this;
				// 开始上传
				new UploadImage([blob], {
					complete: res => {
						console.log(res);
						if (res.length) {
							this.pay_img = res[0].id;
							this.pay_img_url = res[0].path;
						}
					}
				});
			},
			clearImg() {
				this.pay_img = '';
				this.pay_img_url = '';
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
		padding-bottom: 200rpx;
	}

	.height-100 {
		height: 100rpx;
	}

	.placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.shop-item {
		._left {
			width: 300rpx;
		}

		._right {
			width: calc(100% - 300rpx);

			.up-img {
				width: 150rpx;
				height: 150rpx;
				border: 1px dashed #eeeeee;
				position: relative;

				// &::before {
				// 	content: '';
				// 	width: 60rpx;
				// 	height: 4rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }

				// &::after {
				// 	content: '';
				// 	width: 4rpx;
				// 	height: 60rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }
			}

			.img-wrap {
				width: 150rpx;
				height: 150rpx;
				border: 1px dashed #eeeeee;
				position: relative;

				.close {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.pay-img {
		width: 300rpx;
		height: 300rpx;
	}

	.btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;

		.btn {
			width: 300rpx;
			height: 88rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			background: #ffffff;
			color: $theme;
			border-radius: 44rpx;
			border: 1px solid $theme;

			&.active {
				background: $bgtheme;
				color: #ffffff;
			}
		}
	}
	.line {
	  border-top: 20rpx solid #F8F8F8;
	}
</style>
